<template>
  <div class="search-list">
    <SearchItem
      :data="category.categoryText"
      label="Category"
      icon="apps-o"
      @onClick="showList({ category: category.categoryText })"
      v-if="category"
    />
    <SearchItem
      :data="author.author"
      label="Author"
      icon="user-o"
      @onClick="showList({ author: author.author })"
      v-if="author"
    />
    <SearchItem
      :data="publisher.publisher"
      label="Publisher"
      icon="newspaper-o"
      @onClick="showList({ publisher: publisher.publisher })"
      v-if="publisher"
    />
    <SearchTable :data="book" />
  </div>
</template>

<script>
import SearchItem from "@/components/SearchItem";
import SearchTable from "@/components/SearchTable";

export default {
  components: {
    SearchItem,
    SearchTable,
  },
  props: {
    data: Object,
  },
  computed: {
    category() {
      return (
        this.data &&
        this.data.category &&
        this.data.category.length > 0 &&
        this.data.category[0]
      );
    },
    author() {
      return (
        this.data &&
        this.data.author &&
        this.data.author.length > 0 &&
        this.data.author[0]
      );
    },
    book() {
      return (
        this.data &&
        this.data.book &&
        this.data.book.length > 0 &&
        this.data.book
      );
    },
    publisher() {
      return (
        this.data &&
        this.data.publisher &&
        this.data.publisher.length > 0 &&
        this.data.publisher[0]
      );
    },
  },
  methods: {
    showList(params) {
      const query = {};
      if (params.category) {
        query.category = params.category;
      }
      if (params.author) {
        query.author = params.author;
      }
      if (params.publisher) {
        query.publisher = params.publisher;
      }
      this.$router.push({ path: "/pages/list/main", query });
    },
  },
};
</script>

<style lang="scss">
.search-list {
  padding: 15px 0;
}
</style>
